import React, { Component } from 'react'
import {
    NavLink,
} from "react-router-dom"
import { LeftOutlined } from '@ant-design/icons';
import { Table, Button, Row, Col, Input, Empty, notification } from 'antd';
import styles from './style.less'

const { TextArea } = Input;

class AlgorithmModel extends Component {

    constructor(props) {
        super(props);
        this.state = {
            id: props.match.params.id,
            textareaValue: '',
            testResult: [],
            testLoading: false,
        };
    }

    componentDidMount() {
        //  this.props.match.params.id
    }

    onTextareaChange = e => {
        e.preventDefault();
        this.setState({ textareaValue: e.target.value, })
    }

    testValue() {
        const { textareaValue } = this.state;
        !Boolean(textareaValue) && notification['warning']({
            message: '警告',
            key: '测试的文本不能为空',
            description: '测试的文本不能为空'
        });
        this.setState({ testLoading: Boolean(textareaValue) })
    }

    clearValue() {
        this.setState({ textareaValue: '', })
    }

    render() {
        const columns = [
            {
                title: '规则',
                dataIndex: 'modelName',
                width: 220,
            },
            {
                title: '添加时间',
                dataIndex: 'createTimeShort',
                sorter: true,
                width: 100
            }, {
                title: '操作',
                width: 120,
                render: record => {
                    return (
                        <span className={styles.tableOperate}>
                            <a type="link" size='small'>编辑</a>
                            <a type="link" size='small'>删除</a>
                        </span>
                    );
                },
            },
        ];

        const data = [{ "id": 1, 'modelName': '模型1', 'modelType': '1', 'rulesNum': 12, 'createTime': '--' }, { "id": 3, 'modelName': '模型1', 'modelType': '1', 'rulesNum': 12, 'createTime': '--' }, { "id": 8, 'modelName': '模型1', 'modelType': '1', 'rulesNum': 12, 'createTime': '--' }, { "id": 5, 'modelName': '模型1', 'modelType': '1', 'rulesNum': 12, 'createTime': '--' }, { "id": 2, 'modelName': '模型2', 'modelType': '2', 'rulesNum': 7, 'createTime': '--' }]
        
        const { testResult, textareaValue, testLoading } = this.state;
        
        return (
            <div className={styles.modelBox}>
                <header>
                    <NavLink to='/rules'><LeftOutlined /> 返回</NavLink>
                    <h3>xxx模型</h3>
                </header>
                <main>
                    <div>
                        <h4>
                            规则
                            <Button type="primary" size='small' style={{ float: 'right' }}>添加规则</Button>
                        </h4>
                        <Table
                            bordered
                            size='small'
                            columns={columns}
                            dataSource={data}
                            rowKey={record => record.id}
                        />
                    </div>
                    <div>
                        <h4>测试</h4>
                        <section>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <TextArea placeholder="请将测试文本粘贴到此处" className={styles.texts} onChange={this.onTextareaChange} value={textareaValue} />
                                </Col>
                                <Col span={12}>
                                    <div className={styles.texts}>
                                        {testResult.length ?
                                            '55'
                                            : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 120 }} />
                                        }
                                    </div>
                                </Col>
                            </Row>
                        </section>
                        <div className={styles.bottomBtns}>
                            <Button type="primary" size='small' loading={testLoading} onClick={this.testValue.bind(this)} >测试</Button>
                            <Button disabled={!Boolean(textareaValue)} size='small'>编辑</Button>
                            <Button disabled={!Boolean(textareaValue)} size='small' onClick={this.clearValue.bind(this)}>清空</Button>
                        </div>
                    </div>
                </main>
            </div>
        );
    }
}

export default AlgorithmModel
